import React from 'react'
import { Button, Checkbox, Form, Input ,message } from 'antd';
import { UserOutlined ,KeyOutlined} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
export default function LoginInput() {
  const navigate=useNavigate()
  const onFinish = (values: {username:string,password:string}) => {
    console.log('Success成功后的返回值:', values);
    localStorage.setItem('token','2321ewasdwd122321321')
    navigate("/layout/home")
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed失败信息:', errorInfo);
    message.error('登录信息错误，请检查!', 3);
  };
  return (
    <Form
    name="basic"
    labelCol={{ span: 5 }}
    wrapperCol={{ span: 19 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="用户名"
      name="username"
      validateTrigger="onBlur"
      rules={[{ required: true, message: '用户名必填!' },{max:20,message:"最多20个字符！"}]}
    >
      <Input prefix={<UserOutlined className='form-prefix-icon' />} placeholder='请输入用户名（邮箱地址）！'/>
    </Form.Item>

    <Form.Item
      label="密码"
      name="password"
      validateTrigger="onBlur"
      rules={[{ required: true, message: '密码必填!' },{min:6,message:"最小6位！"}]}
    >
      <Input.Password prefix={<KeyOutlined />} placeholder='请输入密码!'/>
    </Form.Item>

    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 18 }}>
      <Checkbox>Remember me</Checkbox>
    </Form.Item>

    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
      <Button type="primary" htmlType="submit">
       登录
      </Button>
    </Form.Item>
  </Form>
  )
}
